import React from "react";
import "./index.less";
import { WhiteSpace, List } from "antd-mobile";
import { getQueryString } from "@/utils/utils.js";
import { http } from "@/utils/request";
import api from "@/utils/api";
import { withRouter } from "react-router-dom";
const Item = List.Item;
class TaskDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      task: {},
      amount: "",
      merchant: {},
      list: [
        {
          bankName: "工商银行",
          inUserIdCard: "xxxxxxxxx",
          createDate: "2020-12-13",
          amount: "3000",
        },
      ],
    };
  }

  componentWillMount() {
    let id = getQueryString("id");
    http
      .post(api.getTaskDetails, {
        id: id,
      })
      .then((res) => {
        this.setState({
          ...res.data,
        });
      });
  }

  render() {
    let { task, amount, merchant } = this.state;
    return (
      <div className="taskDetail">
        <div className="top bgc-fff">
          <div className="w">
            <div className="flex flex-between">
              <p className="ft-17 col-262626 ft-bold">{task.name}</p>
              <p className="ft-13">{task.endFlag == "0" ? "正常" : "已关闭"}</p>
            </div>
            <div className="flex flex-between">
              <p className="ft-17 col-262626 ft-bold">
                <span className="col-FF8A72">{amount}</span> 元/月
              </p>
            </div>
          </div>
        </div>
        <WhiteSpace size="xl" />
        <div className="center bgc-fff">
          <div className="w ft-bold border-bottom-d9">
            <p className="title">任务详情</p>
          </div>
          <div className="w">
            <div className="flex flex-between">
              <p>需求方</p>
              <p>{merchant.merName}</p>
            </div>
            <div className="flex flex-between">
              <p>发布时间</p>
              <p>{task.createDate}</p>
            </div>
            <div className="flex flex-between">
              <p>任务描述</p>
            </div>
            <div className="flex flex-between">
              <p className="col-8C8C8C">{task.content}</p>
            </div>
          </div>
        </div>
        <WhiteSpace size="xl" />
        <div className="bottom bgc-fff">
          <div className="w ft-bold border-bottom-d9">
            <p className="title">发薪记录</p>
          </div>
          <div className="w">
            {this.state.list.map((item) => {
              return (
                <Item onClick={() => {}} extra={'+ '+item.amount}>
                  <div className="col-595959">
                    {item.inBankName} 尾号
                    {item.inUserIdCard.substring(item.inUserIdCard.length - 4)}
                  </div>
                  <div className="col-8C8C8C ft-12">{item.createDate}</div>
                </Item>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(TaskDetail);
